<html>
<head>
    <meta charset="utf-8">
    <title>jquery 文字滚动大全 单行滚动 多行滚动 带按钮控制滚动</title>
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="https://s1.pstatp.com/cdn/expire-1-M/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul, li {
            list-style-type: none;
        }

        body {
            font: 12px/180% Arial, Helvetica, sans-serif;
        }

        a {
            color: #333;
            text-decoration: none;
        }

        a:hover {
            color: #3366cc;
            text-decoration: underline;
        }

        .demopage {
            width: 730px;
            margin: 0 auto;
        }

        .demopage h2 {
            font-size: 14px;
            margin: 20px 0;
        }

        /* scrollDiv */
        .scrollDiv {
            height: 25px; /* 必要元素 */
            line-height: 25px;
            border: #ccc 1px solid;
            overflow: hidden; /* 必要元素 */
        }

        .scrollDiv li {
            height: 25px;
            padding-left: 10px;
        }

        #s2, #s3 {
            height: 100px;
        }
    </style>
</head>

<body style="">
<div class="demopage">
    <h2>jquery 文字上下滚动--单行 批量多行 文字图片上下翻滚 | 单行滚动 <a href="#blog/" style="color:#f70">@by wangbaoguo88@126.com</a></h2>
    <div class="scrollDiv" id="s1">
        <ul style="margin-top: 0px;">
            <li><a href="#">jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果</a></li>
            <li><a href="#">jquery 图片放大镜 图片类似放大镜效果鼠标滑过小图异步加载中图、大图</a></li>
            <li><a href="#">jquery 图片幻灯片 点击小图显示大图异步加载 支持按钮播放</a></li>
            <li><a href="#">jquery 滚动条 Scrollbar 设置浏览器默认滚动条样式</a></li>
            <li><a href="#">jquery 图片切换 switchable 带左右按钮控制分页索引图片切换</a></li>
            <li><a href="#">jquery powerFloat万能浮动框提示插件 支字、ajax异步加载、表单验证等</a></li>
            <li><a href="#">jquery 弹出层插件 ThickBox 多功能弹出层插件支持图片、ajax、内嵌内容弹等</a></li>
            <li><a href="#">jquery 表单美化 jquery tzCheckbox 复选框美化 自定义默认复选框</a></li>
        </ul>
    </div>
    <!--scrollDiv end-->
    <script type="text/javascript">
        function AutoScroll(obj) {
            $(obj).find("ul:first").animate({
                marginTop: "-25px"
            }, 500, function () {
                $(this).css({
                    marginTop: "0px"
                }).find("li:first").appendTo(this);
            });
        }

        $(document).ready(function () {
            setInterval('AutoScroll("#s1")', 3000);
        });
    </script>
    <h2>jquery 文字上下滚动--单行 批量多行 文字图片上下翻滚 | 多行滚动 </h2>
    <div class="scrollDiv" id="s2">
        <ul style="margin-top: 0px;">


            <li><a href="#">jquery Xslider 插件焦点图片特效图片淡隐淡现、图片上下滚动、图片左右滚动、选项卡</a></li>
            <li><a href="#">jquery 文字连续滚动 节奏感十足的齿轮式滚动图片展示与文字内容特效展示</a></li>
            <li><a href="#">jquery cycle 循环幻灯片插件多功能幻灯片插件支持多种幻灯片特效</a></li>
            <li><a href="#">jquery轻量级进度条 progressbar 带动画显示的进度过程的jquery进度条特效</a></li>
            <li><a href="#">jquery菜单特效 鼠标滑过菜单区域图标和文本类似flash动画酷炫移动展示</a></li>
            <li><a href="#">jquery 图片切换 自动切换显示隐藏show/hide带左右按钮与分页索引按钮控制图片自动切换显示隐藏show/hide</a></li>
            <li><a href="#">jquery图片特效 slide banner焦点图片切换图片上下翻滚、图片左右翻滚、图片淡隐淡现3种图片滚动特效</a></li>
            <li><a href="#">javascript jscolor colorpicker js颜色选择器插件10多种调用颜色方法与取值</a></li>
        </ul>
    </div>
    <script type="text/javascript">
        //滚动插件
        (function ($) {
            $.fn.extend({
                Scroll: function (opt, callback) {
                    //参数初始化
                    if (!opt) var opt = {};
                    var _this = this.eq(0).find("ul:first");
                    var lineH = _this.find("li:first").height(), //获取行高
                        line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10), //每次滚动的行数，默认为一屏，即父容器高度
                        speed = opt.speed ? parseInt(opt.speed, 10) : 500, //卷动速度，数值越大，速度越慢（毫秒）
                        timer = opt.timer ? parseInt(opt.timer, 10) : 3000; //滚动的时间间隔（毫秒）
                    if (line == 0) line = 1;
                    var upHeight = 0 - line * lineH;
                    //滚动函数
                    scrollUp = function () {
                        _this.animate({
                            marginTop: upHeight
                        }, speed, function () {
                            for (i = 1; i <= line; i++) {
                                _this.find("li:first").appendTo(_this);
                            }
                            _this.css({
                                marginTop: 0
                            });
                        });
                    }
                    //鼠标事件绑定
                    _this.hover(function () {
                        clearInterval(timerID);
                    }, function () {
                        timerID = setInterval("scrollUp()", timer);
                    }).mouseout();
                }
            });
        })(jQuery);

        $(document).ready(function () {
            $("#s2").Scroll({
                line: 4,
                speed: 500,
                timer: 4000
            });
        });
    </script>


    <h2>jquery 上下滚动--单行 批量多行 文字图片上下翻滚 | 可控制向前向后的多行滚动</h2>
    <div class="scrollDiv" id="s3">
        <ul style="margin-top: 0px;">


            <li><a href="#">jquery colorpicker 插件颜色选择器 点击颜色选择颜色值与颜色相应变化</a></li>
            <li><a href="#">jquery评论星星打分特效、鼠标滑过星星显示评论信息</a></li>
            <li><a href="#">jquery图片切换滚动 水平手风琴切换滚动鼠标滑过图片水平切换</a></li>
            <li><a href="#">jquery 图片切换滚动特效带分页索引按钮控制左右图片切换滚动</a></li>
            <li><a href="#">jquery筛选器插件选项卡 css3制作一个漂亮的HTML5筛选容器插件选项卡</a></li>
            <li><a href="#">jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示</a></li>
            <li><a href="#">jquery特效基于jquery幻灯片插件制作一个泡沫幻灯片图片展示特效</a></li>
            <li><a href="#">jquery 图片幻灯片仿IBM首页焦点图切换，类似flash动态效果图片切换</a></li>
        </ul>
    </div>
    <span id="btn1" style="color: rgb(248, 137, 62); cursor: pointer;">点击向上滚动</span>&nbsp;&nbsp;<span id="btn2" style="color: rgb(248, 137, 62); cursor: pointer;">点击向下滚动</span>
    <script type="text/javascript">
        (function ($) {
            $.fn.extend({
                Scroll: function (opt, callback) {
                    //参数初始化
                    if (!opt) var opt = {};
                    var _btnUp = $("#" + opt.up); //Shawphy:向上按钮
                    var _btnDown = $("#" + opt.down); //Shawphy:向下按钮
                    var timerID;
                    var _this = this.eq(0).find("ul:first");
                    var lineH = _this.find("li:first").height(), //获取行高
                        line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10), //每次滚动的行数，默认为一屏，即父容器高度
                        speed = opt.speed ? parseInt(opt.speed, 10) : 500; //卷动速度，数值越大，速度越慢（毫秒）
                    timer = opt.timer //?parseInt(opt.timer,10):3000; //滚动的时间间隔（毫秒）
                    if (line == 0) line = 1;
                    var upHeight = 0 - line * lineH;
                    //滚动函数
                    var scrollUp = function () {
                        _btnUp.unbind("click", scrollUp); //Shawphy:取消向上按钮的函数绑定
                        _this.animate({
                            marginTop: upHeight
                        }, speed, function () {
                            for (i = 1; i <= line; i++) {
                                _this.find("li:first").appendTo(_this);
                            }
                            _this.css({
                                marginTop: 0
                            });
                            _btnUp.bind("click", scrollUp); //Shawphy:绑定向上按钮的点击事件
                        });

                    }
                    //Shawphy:向下翻页函数
                    var scrollDown = function () {
                        _btnDown.unbind("click", scrollDown);
                        for (i = 1; i <= line; i++) {
                            _this.find("li:last").show().prependTo(_this);
                        }
                        _this.css({
                            marginTop: upHeight
                        });
                        _this.animate({
                            marginTop: 0
                        }, speed, function () {
                            _btnDown.bind("click", scrollDown);
                        });
                    }
                    //Shawphy:自动播放
                    var autoPlay = function () {
                        if (timer) timerID = window.setInterval(scrollUp, timer);
                    };
                    var autoStop = function () {
                        if (timer) window.clearInterval(timerID);
                    };
                    //鼠标事件绑定
                    _this.hover(autoStop, autoPlay).mouseout();
                    _btnUp.css("cursor", "pointer").click(scrollUp).hover(autoStop, autoPlay); //Shawphy:向上向下鼠标事件绑定
                    _btnDown.css("cursor", "pointer").click(scrollDown).hover(autoStop, autoPlay);

                }
            })
        })(jQuery);

        $(document).ready(function () {
            $("#s3").Scroll({
                line: 4,
                speed: 500,
                timer: 2000,
                up: "btn1",
                down: "btn2"
            });
        });

    </script>
</div>
<!--demopage end-->

</body>
</html>